<template>
    <div v-show="isShow" @click="isShow = false" class="overlay center">
        <div class="img-content relative center">
            <img @click.stop :src="props.url" class="img">
            <el-icon class="close-icon absolute cursor-pointer" size="30"><CircleCloseFilled /></el-icon>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { CircleCloseFilled } from '@element-plus/icons-vue';

const props = withDefaults(defineProps<{
    url: string;
    urlList?: string[]
}>(), {
    url: '',
    urlList: () => [],
});

const isShow = ref(false);

defineExpose({
    show: () => {
        isShow.value = true;
    },
});
</script>

<style lang="scss" scoped>
.overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    height: 100%;
    background-color: rgba(0, 0, 0, .2);
    overflow: auto;
    

    .img-content {
        // overflow: visible;
        width: 80%;

        .img {
            border-radius: 8px;
            min-width: 50%;
            max-width: 100%;
        }

        .close-icon {
            right: 0px;
            top: -34px;
            z-index: 2;
            color: #5E5E5E;
        }
    }
}
</style>